<template>
  <div ref="containerRef" class="custom-table-container">
    <el-page-header :content="'【' + title + '】客服列表'" @back="goBack" />
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form :inline="true" :model="queryForm" @submit.prevent>
          <el-form-item>
            <el-button :icon="Plus" type="primary" @click="handleAdd(row)">
              添加客服
            </el-button>
            <!-- <el-button type="success" @click="handleBookList(row)">
              推荐书籍
            </el-button> -->
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支*持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        :width="item.width"
      >
        <template #default="{ row }">
          <div v-if="item.prop == 'avatar'" class="upload-image">
            <el-image
              v-if="row[item.prop]"
              class="keFuImg"
              :lazy="true"
              :preview-src-list="imageFun(row)"
              preview-teleported
              :src="row[item.prop]"
              style="border-radius: 50%"
            />
            <span v-else>无</span>
          </div>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="客服设置"
        width="120"
      >
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleMsg(row)"
          >
            客服欢迎语
          </el-button>
          <el-button
            class="but_text"
            style="margin-left: 0"
            text
            type="primary"
            @click="handleKeyWord(row)"
          >
            客服关键字
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="消息设置"
        width="220"
      >
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleDefault(row)"
          >
            默认消息
          </el-button>
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handlePushList(row)"
          >
            延时消息
          </el-button>
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleTimeList(row)"
          >
            定时消息
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="客户回复" width="90">
        <template #default="{ row }">
          <el-button type="primary" @click="handleCustomList(row)">
            <vab-icon
              icon="customerReply"
              is-custom-svg
              style="width: 16px; height: 16px"
            />
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" fixed="right" label="客服书包" width="90">
        <template #default="{ row }">
          <el-button type="success" @click="handleBookPack(row)">
            <vab-icon icon="book-read-line" style="font-size: 14px" />
          </el-button>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" fixed="right" label="复制客服" width="90">
        <template #default="{ row }">
          <el-button type="primary" @click="handleCopyKf(row)">
            <vab-icon icon="customer-service-line" style="font-size: 14px" />
          </el-button>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" fixed="right" label="客服接待" width="90">
        <template #default="{ row }">
          <el-button type="warning" @click="handleServicer(row)">
            <vab-icon icon="user-received-2-line" style="font-size: 14px" />
          </el-button>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" fixed="right" label="数据统计" width="90">
        <template #default="{ row }">
          <el-button type="success" @click="handleStatisticList(row)">
            <vab-icon icon="bar-chart-fill" style="font-size: 14px" />
          </el-button>
        </template>
      </el-table-column> -->
      <el-table-column align="center" fixed="right" label="操作" width="130">
        <template #default="{ row }">
          <el-button
            :icon="CopyDocument"
            type="primary"
            @click="handleCopy(row)"
          />
          <el-button :icon="Delete" type="danger" @click="handleDelete(row)" />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <edit ref="editRef" @fetch-data="fetchData" />
    <EditMsg ref="editMsgRef" @fetch-data="fetchData" />
    <EditKWList ref="editKWListRef" />
    <EditPushList ref="editPushListRef" />
    <EditTimeList ref="editTimeListRef" />
    <EditDefaul ref="editDefaultRef" />
    <EditSerList ref="editSerListRef" />
    <EditCopyKf ref="editCopyKfRef" @fetch-data="fetchData" />
    <EditBookList ref="editBookListRef" />
    <EditBookPack ref="editBookPackRef" @fetch-data="fetchData" />
    <EditCustomList ref="editCustomListRef" />
    <EditStatisticList ref="editStatisticListRef" />
  </div>
</template>

<script>
  import { useTabsStore } from '@/store/modules/tabs'
  import { handleActivePath } from '@/utils/routes'
  import { getWeComList, getWeComKfLink, doWeComDelete } from '@/api/enterpriseWeChat/weCom'
  import { Delete, Plus, CopyDocument } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'Customer',
    components: {
      Edit: defineAsyncComponent(() => import('./components/TableEdit')),
      EditMsg: defineAsyncComponent(() => import('./components/TableMsgEdit')),
      EditKWList: defineAsyncComponent(() =>
        import('./components/TableKWListEdit')
      ),
      EditPushList: defineAsyncComponent(() =>
        import('./components/TablePushListEdit')
      ),
      EditTimeList: defineAsyncComponent(() =>
        import('./components/TableTimeListEdit')
      ),
      EditDefaul: defineAsyncComponent(() =>
        import('./components/TableDefaulEdit')
      ),
      EditSerList: defineAsyncComponent(() =>
        import('./components/TableSerListEdit')
      ),
      EditBookList: defineAsyncComponent(() =>
        import('./components/TableBookListEdit')
      ),
      EditBookPack: defineAsyncComponent(() =>
        import('./components/TableBookPackEdit')
      ),
      EditCopyKf: defineAsyncComponent(() =>
        import('./components/TableCopyKfEdit')
      ),
      EditCustomList: defineAsyncComponent(() =>
        import('./components/TableCustomListEdit')
      ),
      EditStatisticList: defineAsyncComponent(() =>
        import('./components/TableStatisticListEdit')
      ),
    },
    setup() {
      const route = useRoute()
      const router = useRouter()
      const tabsStore = useTabsStore()

      const { changeTabsMeta, delVisitedRoute } = tabsStore
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const $baseTableHeight = inject('$baseTableHeight')
      const state = reactive({
        editRef: null,
        editMsgRef: null,
        editKWListRef: null,
        editPushListRef: null,
        editTimeListRef: null,
        editSerListRef: null,
        editCopyKfRef: null,
        editDefaultRef: null,
        editBookListRef: null,
        editBookPackRef: null,
        editCustomListRef: null,
        editStatisticListRef: null,
        lookEditRef: null,
        decodeEditRef: null,
        border: true,
        height: $baseTableHeight(1),
        stripe: false,
        columns: [
          {
            label: '#',
            prop: 'avatar',
            width: 120,
          },
          {
            label: '客服ID',
            prop: 'open_kfid',
            width: 'auto',
          },
          {
            label: '客服名称',
            prop: 'name',
            width: 'auto',
          },
        ],
        list: [],
        wordNumList: [],
        listLoading: true,
        title: '',
        queryForm: {
          corp_id: '',
        },
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const fetchData = async () => {
        state.listLoading = true
        const { data } = await getWeComList(state.queryForm)
        state.list = data
        state.listLoading = false
      }
      const containerRef = ref(null)
      const { toggle, isFullscreen } = useFullscreen(containerRef)
      const clickFullScreen = () => {
        toggle().then(() => {
          handleHeight()
        })
      }
      const handleHeight = () => {
        if (isFullscreen.value) state.height = $baseTableHeight(1) + 356
        else state.height = $baseTableHeight(1)
      }
      const handleAdd = () => {
        state['editRef'].showEdit(state.queryForm.corp_id, state.list)
      }
      const handleBookList = () => {
        state['editBookListRef'].showEdit(state.queryForm.corp_id)
      }
      const handlePushList = (row) => {
        state['editPushListRef'].showEdit(
          state.queryForm.corp_id,
          row.open_kfid
        )
      }
      const handleTimeList = (row) => {
        state['editTimeListRef'].showEdit(
          state.queryForm.corp_id,
          row.open_kfid
        )
      }
      const handleDefault = (row) => {
        state['editDefaultRef'].showEdit(state.queryForm.corp_id, row.open_kfid)
      }
      const handleMsg = (row) => {
        state['editMsgRef'].showEdit(state.queryForm.corp_id, row.open_kfid)
      }
      const handleKeyWord = (row) => {
        state['editKWListRef'].showEdit(state.queryForm.corp_id, row.open_kfid)
      }
      const handleBookPack = (row) => {
        state['editBookPackRef'].showEdit(row.open_kfid)
      }
      const handleCopyKf = (row) => {
        state['editCopyKfRef'].showEdit(
          state.queryForm.corp_id,
          row.open_kfid,
          state.list
        )
      }
      const handleCustomList = (row) => {
        state['editCustomListRef'].showEdit(
          state.queryForm.corp_id,
          row.open_kfid
        )
      }
      const handleServicer = (row) => {
        state['editSerListRef'].showEdit(state.queryForm.corp_id, row.open_kfid)
      }
      const handleStatisticList = (row) => {
        state['editStatisticListRef'].showEdit(row.open_kfid)
      }
      const handleCopy = async (row) => {
        if (row.open_kfid) {
          const { code, message, data } = await getWeComKfLink({
            open_kfid: row.open_kfid,
            corp_id: state.queryForm.corp_id,
          })
          if (code == 200) {
            copyFun(data.url)
          } else {
            $baseMessage(message, 'error', 'vab-hey-error-success')
          }
        }
      }
      const handleDelete = (row) => {
        if (row.open_kfid) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doWeComDelete({
              open_kfid: row.open_kfid,
              corp_id: state.queryForm.corp_id,
            })
            $baseMessage(message, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        }
      }
      const copyFun = (content) => {
        const oInput = document.createElement('input')
        oInput.value = content
        document.body.appendChild(oInput)
        oInput.select()
        document.execCommand('Copy')
        $baseMessage(
          '微信客服链接复制成功',
          'success',
          'vab-hey-message-success'
        )
        oInput.remove()
      }
      const imageFun = (row) => {
        const list = []
        list.push(row.avatar)
        return list
      }
      const goBack = async () => {
        const detailPath = await handleActivePath(route, true)
        await router.push('/enterpriseWeChat/wechatCorp')
        await delVisitedRoute(detailPath)
      }
      onMounted(() => {
        changeTabsMeta({
          title: '客服列表',
          meta: {
            title: `${route.query.corp_name} 客服列表`,
          },
        })
        state.title = route.query.corp_name
        state.queryForm.corp_id = route.query.corp_id
        fetchData()
      })
      return {
        ...toRefs(state),
        containerRef,
        isFullscreen,
        finallyColumns,
        handleHeight,
        clickFullScreen,
        fetchData,
        handleAdd,
        handleBookList,
        handlePushList,
        handleTimeList,
        handleDefault,
        handleMsg,
        handleKeyWord,
        handleDelete,
        handleCopyKf,
        handleBookPack,
        handleServicer,
        handleStatisticList,
        handleCopy,
        handleCustomList,
        imageFun,
        Plus,
        Delete,
        CopyDocument,
        goBack,
      }
    },
  })
</script>
<style lang="scss" scoped>
  :deep() {
    .el-button i {
      margin-right: 0 !important;
    }
    .vab-icon {
      margin: 0 !important;
    }
  }
</style>
